page-webcast-detail {
    @function vw($px) {
        @return $px/1080*100vw;
    }
    .cast-share-button{
        border: 1px solid #ffffff;
        border-radius: 4vw;
        width: 15vw;
        height:6.5vw;
        .button-inner{
            color:#ffffff;
            font-size:vw(45);
        }
        &:last-child{
            width: 16vw;
            margin-left:2vw;
            padding-right:0 !important;
            margin-right:4vw;
            &.favorited{
                border:none;
                background-color:#F3B71A;
            }
        }
    }
    .scroll-content{
        background-color: #ffffff;
    }
    .webcast-container{
        width:100vw;
        height:100%;
        background-color:#000;
    }
    .webcast-content{
        width:100vw;
        height:30vw;
        position:relative;

        .tool{
            width:100%;
            height:12.96vw;
            position:absolute;
            z-index: 1;
            top:0;
            left:0;
            display:flex;
            justify-content: space-around;

            .item{
                width:20%;
                height:100%;
                display:flex;
                justify-content: center;
                align-items: center;
                font-size:4.17vw;
                border-bottom:0.83vw solid transparent;

                &.current{
                    color:#39b54a;
                    border-bottom-color:#39b54a;
                }
            }
        }
        .page-container{
            width:100vw;
            height:auto;
            border-top:1px solid #e9e9e9;
            position:relative;
            top:12.5vw;
            &>div{
                position:absolute;
                top:0;
                left:0;
                visibility:hidden;
                width:100%;
                height:90vw;
                overflow-y:auto;
                -webkit-overflow-scrolling: touch;
                &.current{
                    visibility:visible;
                }

                .file-demo{
                    width:100%;
                    height:100%;
                    z-index:2;
                    position:absolute;
                    top:0;
                    left:0;
                }


            }

        }
    }
    @media only screen and (width: 375px) and (height: 812px) {
        ion-content{
            padding-bottom: 20vw;
        }
    }

    .favorite-row{
        width:88.89%;
        min-height:14.81vw;
        margin:0 auto;
        border-bottom:1px solid #e9e9e9;
        display:flex;
        justify-content: space-between;
        align-items: center;
        font-size:3.89vw;
        .title{
            color:#333;
            font-size:4.16vw;
        }

        .button{
            width: 21vw;
            height: 7vw;
            border:1px solid #39b54a;
            background-color:transparent;
            margin:0;
            padding:0;
            border-radius:3.5vw;
            display:flex;
            align-items: center;
            justify-content: center;
            color:#39b54a;
            font-size: 3.7vw;

            .icon{
                width: 3.8vw;
                height: 3.8vw;
                background:url('../assets/images/webcast/start.fw.png') no-repeat;
                background-size:cover;
                margin-right:1vw;
            }
        }

        .button-favorite{
            width: 21vw;
            height: 7vw;
            //border:1px solid #39b54a;
            border: none;
            background-color:#f2b91c;
            margin:0;
            padding:0;
            border-radius:3.5vw;
            display:flex;
            align-items: center;
            justify-content: center;
            color:#fff;
            font-size: 3.7vw;

            .icon{
                width: 3.8vw;
                height: 3.8vw;
                background:url('../assets/images/webcast/start.fw1.fw.png') no-repeat;
                background-size:cover;
                margin-right:1vw;
            }
        }

        &.webcast-time{
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            .content{
                font-size:3.89vw;
                color:#999;
            }
        }

        &.content-abstract{
            padding:4.63vw 0;
            .content{
                line-height: 6.5vw;
                margin-top: 1.2vw;
            }
            border-bottom:none;

        }

        &.command{
            justify-content: flex-start;
            &>div{
                &:first-child{
                    color:#666;
                }
                &:last-child{
                    color:#000;
                    padding:2vw 0 2vw 2vw;
                }
            }
        }


    }

    .input-wrapper{
        position:absolute;
        width:100vw;
        height:12.96vw;
        bottom:0;
        display:flex;
        justify-content: center;
        align-items: center;
        box-shadow:0 -13px 8vw 0 #eee;
    }

    .input-webcast-text-comment{
        border:1px solid #e1e1e1;
        border-radius:2vw;
        width:88.89vw;
        height:8.89vw;
        line-height:8.89vw;
        padding-left:3vw;
        font-size:3.5vw;
        color: #999999;
        display:block;
    }

    .comment-inputing-wrapper{
        width:100vw;
        height:100%;
        background-color:#ffffff;
        position:absolute;
        top:0;
        left:0;
        z-index:100;
        transform:translateX(100vw);
        transition:transform 0.3s;
        &.show{
            transform:translateX(0);
        }
        .comment-list-wrapper{
            width: 100%;
            max-height: 114vw;
            overflow-y: auto;
        }

        .inputing-container{
            width:100%;
            height:12.96vw;
            position:absolute;
            bottom:0;
            display:flex;
            justify-content: center;
            align-items: center;
            box-shadow:0 -13px 8vw 0 #eee;

            .input-webcast-text-comment{
                width: 58vw;
            }

            button{
                background-color:#39B54A;
                margin:0 0 0 3.33vw;
                padding:0;
                border-radius:1.7vw;
                width:13.24vw;
                height:8.89vw;
            }
            .return{
                margin:0 0 0 3.33vw;
                font-size:4.17vw;
                color:#333333;
            }
        }

    }

    .share-menu{
        width:100vw;
        height:100%;
        background-color:rgba(0,0,0,0.2);
        position:absolute;
        top:0;
        left:0;
        z-index: 1000;
        visibility:hidden;

        .tools{
            width:100vw;
            //height:33.24vw;
            height:0.00001vw;
            overflow:hidden;
            background-color:#fff;
            position:absolute;
            transition: 0.2s height;
            display:flex;
            bottom: 0;

            &>div{
                width:50%;
                height:100%;
                display:flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size:3.89vw;
                .icon{
                    width:10.185vw;
                    height:10.185vw;
                    border-radius:50%;
                    background-repeat:no-repeat;
                    background-size:cover;
                }
                .inner{
                    background:none;
                    padding:0;
                    display:flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    height:16vw;
                    width:100%;
                }

                &.share-friend{
                    .icon{
                        background-image:url(../assets/images/activity/activity-details/wechat.png)
                    }
                }
                &.share-moment{
                    .icon{
                        background-image:url(../assets/images/activity/activity-details/pyq.png)
                    }
                    .inner{
                        border-left:1px solid #e9e9e9;
                    }
                }
            }
        }

        &.is-show{
            visibility:visible;
            .tools{
                height:33.24vw;
            }
        }
    }

    .button-tool{
        height:vw(70);
        width:auto;
    }

    #inputFocus{
        width: 1px;
        height: 1px;
        position: absolute;
        background: none;
        border: none;
    }

}
